<html>
<head>

<link rel="stylesheet" href="style.css">
<script src="jquery-1.11.0.js"></script>
		<script src="gen.js"></script>
		<script>
			//makes a synchronous call to the page u and return the 
			//result as object
			var jid;
			function syncAjax(u){
				var obj=$.ajax(
					{url:u,
					 async:false
					 }
				);
				return $.parseJSON(obj.responseText);
				
			}
			function edit(obj,id){
				var r=get_birth(id);
				if(r.result==0){
					//show error message
					$("#divStatus").text(r.message);
					return;
				}
				//get the data from object r and put it in the form
				$("#id").prop("value", r.birth.id);
				$("#name").prop("value", r.birth.name);
				$("#gender").prop("value", r.birth.gender);
				$("#place_of_birth").prop("value", r.birth.place_of_birth);
				$("#date_of_birth").prop("value", r.birth.date_of_birth);
				//show the form
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//display the form
				$("#divEdit").fadeIn(1000);
			}
			//returns a result object for one vaccine 
			function get_birth(id){
				jid = id;
				var u="birth_action.php?cmd=1&id="+id;
				return syncAjax(u);
			}
			//makes asynchronous call to the save page
			function save(){
				//complete the url
				//var jid = document.getElementById("id").value;
				var bn = document.getElementById("name").value;
				var bg = document.getElementById("gender").value;
				var bp = document.getElementById("place_of_birth").value;
				var bd = document.getElementById("date_of_birth").value;
				
				var u="birth_action.php?cmd=2&bn="+bn+"&bg="+bg+"&bp="+bp+"&bd="+bd+"&id="+jid;
				syncAjax(u);
				
				$.getJSON(u,saveDone);
				location.reload();
				cancel();
			}
			
			function saveDone(data){
				
				alert(data);
			}
			//hides the form
			function cancel(){
				//fade out the form in half a second
				$("#divEdit").fadeOut(500);

			}
		</script>

</head>
<?php
include("birth.php");
$obj= new birth();

if(!$obj){
echo "error ";
exit();
}

?>
<div>
 <table class="reporttable" width="50%">
 <tr class="header">
 <td>BIRTH ID </td><td>FULL NAME</td><td>GENDER</td><td>BIRTH PLACE</td><td>BIRTH DATE</td>
 </tr>


<?php
if(!$obj->get_all_birth()){
echo "error ";
exit();
}
$obj->get_all_birth();
$row = $obj->fetch();
$row_counter=0;
while($row){
$id=$row["birth_id"];
if($row_counter%2==0){
			$style=" class='row1' ";
		}else{
			$style=" class='row2'  ";
		}	



echo("<tr $style><td>");
echo$row["birth_id"];
echo("</td>");

echo("<td>");
echo $row["name"];
echo("</td>");

echo("<td>");
echo $row["gender"];
echo("</td>");

echo("<td>");
echo $row["place_of_birth"];
echo("</td>");

echo("<td>");
echo $row["date_of_birth"];
echo("</td>");

echo "<td><span class='hotspot' onclick='edit(this,$id,event)'>edit<span></td>";
echo"</tr>";

$row = $obj->fetch();
$row_counter++;

}

?>
</table>
</div>

<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">Name:</td> 
						<td class="field"><input type="text" value="" id="name" >
						</td>
					</tr>
					<tr>
						<td class="label">Gender:</td>
						<td class="field"><input type="text" value="" id="gender" >
						</td>
					</tr>
					<tr>
						<td class="label">Place of Birth:</td>
						<td class="field"><input type="text" value="" id="place_of_birth" >
						</td>
					</tr>
					<tr>
						<td class="label">Date of Birth:</td>
						<td class="field"><input type="text" value="" id="date_of_birth" >
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" >
							<input type="button" value="cancel" onclick="cancel()" >
						</td>
					</tr>
			</table>
				
	</div>
</html>